<script lang="ts" setup>
import { useLocale } from '@/locale/locale';
import { RouteMap, useRouter } from '@/router';
import { onMounted, reactive, ref } from 'vue';
import { useUserStore } from '@/store/user';
// @ts-ignore
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
// @ts-ignore
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll';
import { getWithdrawList } from '@/api/user';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const router = useRouter();
const statusBarH = ref(0);
const list = ref<any[]>([]);
const stat = ref('');
const userStore = useUserStore();

const upOption = reactive({
  // 首次自动执行
  auto: false,
  // 数量要大于3条才显示无更多数据
  noMoreSize: 3,
  offset: 10,
  textLoading: '',
  empty: {
    use: false
  }
});
const downOption = reactive({
  textInOffset: '',
  textOutOffset: '',
  textLoading: '',
  textSuccess: '',
  empty: {
    use: false
  }
});
const { mescrollInit, downCallback, getMescroll } = useMescroll();

const upCallback = async (mescroll: any) => {
  const payload: any = {
    pageNum: mescroll.num,
    pageSize: mescroll.size
  };

  if (userStore.user.rebateMode == 'STAFF') {
    payload.StaffId = userStore.user.staffId;
  } else {
    payload.ChannelId = userStore.user.channelId;
  }

  if (stat.value) {
    payload.withdrawStatus = stat.value;
  }

  const res = await getWithdrawList(payload);
  let newList = res.data.list;
  if (!res.data.list) {
    newList = [];
  }
  mescroll.endBySize(newList.length, res.data.count);
  if (mescroll.num == 1) {
    list.value = [];
  }
  list.value = list.value.concat(newList);
};

function changeTabs(tab: string) {
  stat.value = tab;
  downCallback();
}

onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarH.value = res.statusBarHeight || 0;
    }
  });
});
</script>

<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    :title="t('LDKey_distributionDetail')"
    fixed
    left-icon="left"
    status-bar
    @click-left="router.back"
  />
  <view :style="{ top: 'calc(44px + ' + statusBarH + 'px)' }" class="apt-tabs">
    <view :class="stat == '' ? 'active' : ''" class="apt-tabs-item" @click="changeTabs('')">
      {{ t('LDKey_distributionCommissionOrderAll') }}
    </view>
    <view :class="stat == 'WAIT' ? 'active' : ''" class="apt-tabs-item" @click="changeTabs('WAIT')">
      {{ t('LDKey_distributionCommissionWithdrawing') }}
    </view>
    <view
      :class="stat == 'SUCCESS' ? 'active' : ''"
      class="apt-tabs-item"
      @click="changeTabs('SUCCESS')"
    >
      {{ t('LDKey_distributionWithdrawn') }}
    </view>
  </view>
  <view
    :style="{ height: 'calc(100vh - 44px - 116rpx - ' + statusBarH + 'px)' }"
    class="distribution-order-contain"
  >
    <view class="distribution-order-list">
      <mescroll-uni
        ref="mescrollRef"
        :down="downOption"
        :fixed="false"
        :up="upOption"
        @down="downCallback"
        @init="mescrollInit"
        @up="upCallback"
      >
        <view
          v-for="(item, index) in list"
          v-if="list.length > 0"
          :key="index"
          class="distribution-order-list-item"
          @click="router.to(RouteMap.withdrawDetail, { id: item.id })"
        >
          <view class="distribution-order-list-item-t">
            <view class="distribution-order-list-item-t-l">
              <image src="/static/distribution/icon_withdraw.png" />
              {{ item.withdrawSn }}
            </view>
            <view class="distribution-order-list-item-t-r">
              -{{ item.withdrawAmount ? item.withdrawAmount : 0 }}
            </view>
          </view>
          <view class="distribution-order-list-item-b">
            <view>{{ item.createdAt }}</view>
            <view v-if="item.withdrawStatus == 'WAIT'" class="wait">
              {{ t('LDKey_distributionCommissionWithdrawing') }}
            </view>
            <view v-else-if="item.withdrawStatus == 'SUCCESS'" class="success">
              {{ t('LDKey_distributionCommissionDetailWithdrawSuccess') }}
            </view>
            <view v-else-if="item.withdrawStatus == 'FAIL'" class="fail">
              {{ t('LDKey_distributionCommissionWithdrawFailed') }}
            </view>
            <view v-else></view>
          </view>
        </view>
        <view v-else class="distribution-order-list-empty">
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/icon_points_empty.png"
          />
          <view>{{ t('LAKey_pointEmpty') }}</view>
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.apt-tabs {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 96rpx;
  background: #fff;
  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(100, 100, 111, 0.08);
  padding: 28rpx 60rpx 0;
  display: flex;
  justify-content: space-between;

  &-item {
    font-weight: 400;
    font-size: 28rpx;
    color: #707070;
    line-height: 40rpx;

    view {
      height: 4rpx;
      background: #ffffff;
      margin-top: 8rpx;
    }

    &.active {
      font-weight: 500;
      color: #3d3d3d;

      view {
        background: #269c74;
      }
    }
  }
}

.distribution-order-contain {
  margin-top: 116rpx;
  position: relative;
}

.distribution-order-list {
  //margin: 20rpx 24rpx;
  border-radius: 20rpx;
  position: absolute;
  top: 20rpx;
  bottom: 20rpx;
  left: 24rpx;
  right: 24rpx;
  background: #ffffff;
  padding: 24rpx 0 24rpx 30rpx;

  &-item {
    border-bottom: 1px solid #f5f5f5;
    padding: 38rpx 32rpx 26rpx 0;

    &:last-child {
      border-bottom: none;
    }

    &-t {
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-l {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 28rpx;
        color: #3d3d3d;
        line-height: 40rpx;

        image {
          display: block;
          width: 48rpx;
          height: 48rpx;
          margin-right: 8rpx;
        }
      }

      &-r {
        font-weight: 400;
        font-size: 32rpx;
        color: #3d3d3d;
        line-height: 38rpx;
      }
    }

    &-b {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 56rpx;

      view {
        &:first-child {
          font-weight: 400;
          font-size: 24rpx;
          color: #979797;
          line-height: 34rpx;
        }

        &:last-child {
          font-weight: 400;
          font-size: 24rpx;
          color: #269c74;
          line-height: 34rpx;

          &.wait {
            color: #269c74;
          }

          &.success {
            color: #e87b15;
          }

          &.fail {
            color: #d13820;
          }
        }
      }
    }
  }

  &-empty {
    margin-top: 52rpx;
    position: relative;

    image {
      display: block;
      width: 556rpx;
      height: 556rpx;
      margin: 0 auto;
    }

    view {
      text-align: center;
      font-size: 28rpx;
      color: #afafaf;
      line-height: 44rpx;
      font-weight: 400;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 50rpx;
    }
  }
}
</style>
